<template>
  <div id="qrcode">
    <yd-navbar class="indexHeader" height="0.96rem" bgcolor="rgba(255,255,255,0)" >
        <router-link to="/my" slot="left">
            <yd-navbar-back-icon class="indexheader-font" :color="'#fff'">二维码</yd-navbar-back-icon>
        </router-link>
        <span slot="right" class="more">
            <yd-icon name="more" size="0.53333rem"></yd-icon>
        </span>
    </yd-navbar>
  	<div class="myqrcode">
      <div class="myqrcode-title">
        <span class="myicon"><img src="http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg"></span>
        <span class="myqrcode-text">二维码</span>
      </div>
      <div class="qrcodewrap">
        <div id="qrcode-con"></div>
        <div class="qrcode-text">扫描上面的二维码，关注我</div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2' 
export default {
  name: 'my',
  components: {
  },
  data(){
  	return{
  		userinfo:{
  			name:'这里是昵称',
  			src:'http://static.ydcss.com/uploads/lightbox/meizu_s1.jpg',
  			bodyHeight:160,
  			bodyWeight:52,
  			focuslist:[
  				{name:'健康',id:1},
  				{name:'养生',id:2},
  				{name:'养颜',id:3},
          {name:'跳舞',id:4},
          {name:'跳舞',id:4},
          {name:'跳舞',id:4},
          {name:'跳舞',id:4},
  				{name:'跳舞',id:4}
  			],
        clocklist:[
          {time:'06:00',id:1},
          {time:'07:00',id:2},
          {time:'08:00',id:3},
          {time:'09:00',id:4},
          {time:'10:00',id:5},
          {time:'11:00',id:6},
          {time:'12:00',id:7},
        ]
  		}
  	}
  },
  methods:{
    qrcode () {  
      let qrcode = new QRCode('qrcode-con', {  
        width: 223,  
        height: 223, // 高度  
        text: 'www.baidu.com', // 二维码内容  
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
        background: '#000',  
        foreground: '#fff'  
      })
    }  
  },
  mounted(){
    this.qrcode();
  }
}
</script>
<style lang="scss">
	@import "../style/public.scss";
	#qrcode{
    background:#378a3b;
    height:100%;
    .indexHeader{
      .yd-navbar-item:first-child{
        padding:0 rem(20);
      }
      .indexheader-font{
        font-size:rem(32);
        color:#fff;
        i{
          margin-right:rem(18);
        }
      }
    }
    .myqrcode{
      background:#fff;
      margin:rem(90) rem(20) 0;
      border-radius:rem(10);
      padding:0 rem(28) rem(122);
      .myqrcode-title{
        display:flex;
        padding:rem(34) 0 rem(13);
        border-bottom:rem(2) solid #e6e6e6;
        .myicon{
          font-size:0;
          margin-right:rem(30);
          img{
            height:rem(64);
            width:rem(64);
            border-radius:rem(8);
          }
        }
        .myqrcode-text{
          display:flex;
          text-align:left;
          flex-direction:column;
          flex:1;
          align-self:center;
          font-size:rem(32);
          color:#818181;
        }
      }
      .qrcodewrap{
        #qrcode-con{
          width:223px;
          height:223px;
          margin:rem(122) auto rem(28);
        }
        .qrcode-text{
          font-size:rem(24);
          color:#818181;
        }
      }
    }
		.more{
      transform:rotate(90deg);
      font-size:rem(26);
      color:#fff;
    }
	}
</style>
